<html>
<title>事件冒泡和默认行为</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let app = new Vue({
                el: '.container',
                data: {
                },
                methods: {
                    print1: function (e) {
                        console.log(111);
                        //原生js方式
                        //e.stopPropagation();
                    },
                    print2: function (e) {
                        console.log(222);
                    },
                    print3: function (e) {
                        console.log(333);
                    }
                }
            })
        }

    </script>
</head>

<body>
    <div class="container"  @click="print3($event)">
        <p  @click="print2($event)">
            <!-- 原生JS的方式 -->
            <!-- <button @click="print1($event)">点击</button> -->
            <!-- Vue的方式 -->
            <button @click.stop="print1($event)">点击</button>
        </p>
    </div>
</body>

</html>